<template>
  <el-dialog
    title="补充未填写手抄数据"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="missionPart"
  >
    <div class="dataWrite">
      <el-form
        :model="dataForm"
        :inline="true"
        ref="dataForm"
        v-if="copyListHold.length > 0"
      >
        <el-form-item label="日期：" prop="time">
          <el-select
            filterable
            v-model="dataForm.time"
            @change="headWriteChange"
          >
            <el-option
              v-for="(ditem, index) in dTimeOptions"
              :key="index"
              :label="ditem.date"
              :value="ditem.date"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="margin: 0 0 0 15px;">此处数据为录入手抄流量计数据</span>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableCopyList"
        border
        v-if="copyListHold.length > 0"
        style="width: 100%;"
        height="calc(80vh - 210px)"
      >
        <el-table-column
          prop="area"
          width="100"
          header-align="center"
          align="center"
          label="流量计名称"
        />
        <el-table-column
          prop="time"
          header-align="center"
          align="center"
          label="时间"
        >
          <template slot-scope="scope">
            <el-time-select
              v-model="scope.row.time"
              :picker-options="{
                start: '00:00',
                step: '00:10',
                end: '23:50'
              }"
              format="HH:mm"
              placeholder="选择时间"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="positiveFlow"
          header-align="center"
          align="center"
          label="正流量行度"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.positiveFlow"
              placeholder="请输入正流量行度"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="negativeFlow"
          header-align="center"
          align="center"
          label="负流量行度"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.negativeFlow"
              placeholder="请输入负流量行度"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="instantFlow"
          header-align="center"
          align="center"
          label="瞬时流量"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.instantFlow"
              placeholder="请输入瞬时流量"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button
        @click="dataFormSubmit"
        type="primary"
        v-if="isAuth('cms:tbCopyFlowData:save')"
        >确认提交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      stationOptions: [], // 泵站信息
      copyListHold: [], // 手抄数据全汇总
      dTimeOptions: [], //  手抄数据全汇总时间判断
      tableCopyList: [], // 表格手抄数据
      dataForm: {
        time: null // 时间组
      }
    };
  },
  methods: {
    init(copyList, station) {
      this.copyListHold = copyList;
      this.stationOptions = station;
      this.visible = true;
      this.sTimeOptions = [];
      this.tableCopyList = [];
      this.$nextTick(() => {
        if (copyList.length > 0) {
          this.$refs["dataForm"].resetFields();
          copyList.forEach(item => {
            this.dTimeOptions.push({ date: item.date });
          });
          this.dataForm.time = copyList[0].date;
          if (copyList[0].ids && copyList[0].ids.length > 0) {
            copyList[0].ids.forEach(sitem => {
              let stations = this.stationOptions.filter(
                staItem => staItem.id === sitem
              );
              let itemBlock = {
                areaId: sitem,
                area: stations[0].name,
                time: null,
                date: copyList[0].date,
                positiveFlow: null,
                negativeFlow: null,
                instantFlow: null
              };
              this.tableCopyList.push(itemBlock);
            });
          }
        }
      });
    },
    // 获取第一时间数据
    headWriteChange(val) {
      this.tableCopyList = []; // 先清空数据，以防数据重复叠加
      this.$nextTick(() => {
        this.copyListHold.forEach(item => {
          // 遍历循环，找到数据关于当天的数据
          if (item.date === val) {
            if (item.ids && item.ids.length > 0) {
              item.ids.forEach(sitem => {
                let stations = this.stationOptions.filter(
                  staItem => staItem.id === sitem
                );
                let itemBlock = {
                  areaId: sitem,
                  area: stations[0].name,
                  date: val,
                  time: "00:00",
                  positiveFlow: null,
                  negativeFlow: null,
                  instantFlow: null
                };
                this.tableCopyList.push(itemBlock);
              });
            }
          }
        });
      });
    },
    // 数据提交
    dataFormSubmit() {
      let postList = [];
      // 判断手抄数据是否有，有就可以提交
      this.tableCopyList.forEach(item => {
        // 先判断是否有填写正流量行度
        if (item.positiveFlow != null || item.positiveFlow != "") {
          // 判断是否有选择时间
          if (item.time === null || item.time === "") {
            item.time = moment(new Date()).format("HH:mm");
          }
          let PostItem = {
            areaId: item.areaId,
            area: item.area,
            date: item.date + " " + item.time + ":00",
            positiveFlow: parseFloat(item.positiveFlow).toFixed(2),
            negativeFlow: item.negativeFlow ? parseFloat(item.negativeFlow) : 0,
            instantFlow: item.instantFlow ? parseFloat(item.instantFlow) : 0
          };
          postList.push(PostItem);
        }
      });
      // 待数据遍历完成后，进行下一步操作
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl("/cms/tbCopyFlowData/batchsave"),
          method: "post",
          data: postList
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                this.$emit("refreshDataList");
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.dataWrite ::v-deep {
  position: relative;
  .el-form {
    position: relative;
    .el-form-item {
      margin: 0 0 10px;
    }
  }
  .secondForm {
    margin: 10px 0 0;
  }
}
</style>
